<template>
	<view class="">
		<view class="theme flex flex--row justify-center align-center">
			<u-tag 
				:text="
					detail.status===1?'待到店':
					detail.status===4?'已取消':
					detail.status===2?'已到店':
					detail.status===3?'已开单':
					detail.status===5?'待服务':
					detail.status===9?'已服务':''" 
				color="#fff" 
				borderColor="#e54d42" 
				bgColor="#e54d42" 
				size="mini" 
				icon="error-circle-fill" 
				shape="circle" 
			/>
			<text class="fsize-34 mt-30">{{detail.date}}</text>
			<view class="user-info flex align-center">
				<view class="w-100 flex justify-between align-center fsize-26" @click="$u.route('/pages/customer/details', {id:detail.userId })">
					<view class="flex flex--row">
						<text class="fsize-30">{{detail.userName}}</text>
						<!-- <text clss="mt-10">{{detail.userPhone}}</text> -->
					</view>
					<view class="flex align-center">
						<text class="fsize-24">会员详情</text>
						<u-icon name="arrow-right" size="16" color="#fff"></u-icon>
					</view>
				</view>
				<!-- <view class="icon">
					<u-icon name="phone-fill" size="24" color="#fff" @click="phoneCall(detail.userPhone)"/>
				</view> -->
			</view>
			<view class="flex mt-30">
				<view v-if="detail.status===1">
					<u-tag text="到店" icon="map" color="#fff" borderColor="#e54d42" bgColor="#e54d42" size="large" @click="onDefine(detail.appointId)" />
				</view>
				<view class="ml-20" v-if="detail.status===2">
					<u-tag text="开单" borderColor="#fff" color="#fff" plain size="large" @click="$u.route('/pages/order/add/index', {id: detail.appointId})" />
				</view>
				<!-- <view class="ml-20" v-if="detail.status===1 || detail.status===2">
					<u-tag text="编辑" borderColor="#fff" color="#fff" plain size="large" @click="$u.route('/pages/shop/Reservation/add', {id: detail.appointId})"/>
				</view> -->
				<view class="ml-20" v-if="detail.status===1 || detail.status===2">
					<u-tag text="取消预约" borderColor="#fff" color="#fff" plain size="large" @click="ondelrs(detail.appointId)" />
				</view>
			</view>
		</view>
		<view class="padding-30">
			<view class="bg-white pl-30 pr-30 border-radius-10">
				<view class="border-b pt-30 pb-30 flex justify-between align-center" v-for="(item, index) in detail.items" :key="index">
					<text>{{item.itemName}}</text>
					<text class="line-grey">{{item.staffName}}</text>
				</view>
				<!-- <view class="border-b pt-30 pb-30 flex">
					<text>技师</text>
					<text class="ml-60">{{detail.staffName}}</text>
				</view> -->
				<view class="pt-30 pb-30 flex">
					<text>备注</text>
					<text class="ml-60">{{detail.remark || '--'}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data () {
			return { detail: {} }
		},
		onLoad(opt) {
			this.getDetail(opt.id)
			uni.$on('reId', obj=>{
				this.getDetail(obj.id)
			})
		},
		onUnload() {
			// 移除监听事件
			uni.$off('reId')
		},
		methods: {
			ondelrs(id){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认已沟通客户，并取消改预约订单?',
					success: function (res) {
						if (res.confirm) {
							that.$reqJsonPost('StoreStaffDoSetisCancel', { id: id }).then(res=>{
								// that.dataList = that.dataList.filter(im=>im.id !== id)
								that.getDetail(id)
							})
						}
					}		
				})
			},
			onDefine(id){
				this.$reqJsonPost('StoreStaffDoSetisArrival', { id: id }).then(res=>{
					this.getDetail(id)
				})
			},
			phoneCall(num){
				uni.makePhoneCall({ phoneNumber: num })
			},
			getDetail(id){
				this.$reqJsonPost('GetStaffAppointmentDetail', { id: id }).then(res=>{
					this.detail = res.data
				})
			},
		}
	} 
</script>

<style lang="scss" scoped>
	.theme{
		padding:30rpx;
		background-color:#3c4f79;
		color:#fff;
		.user-info{
			width:630rpx;
			padding: 30rpx;
			margin-top: 20rpx;
			border-radius: 10rpx;
			background: rgba(255, 255, 255, 0.1);
		}
		.icon{
			margin-left: 20rpx;
			border-left:2px rgba(255, 255, 255, 0.1) solid;
			padding-left: 20rpx;
		}
	}
</style>rpx